<template>
	<view class="container">
		<view class="header-bg">
			<view class="header-main">
				<view class="course">{{ info && info.goods ? info.goods.goods_name : '' }}</view>
				<view v-if="info" class="status" :class="'status-' + getOrderStatusClass(info.order_status)">
					{{ getOrderStatusText(info.order_status) }}
				</view>
			</view>
		</view>
		<view v-if="info" class="detail-content">
			<!-- 学员列表（兼容1人和多人） -->
			<view class="block">
				<view class="block-title">学员信息</view>
				<view v-for="u in userInfo" :key="u.user_id" class="user-row">
					<image v-if="u.user && u.user.avatar" class="avatar" :src="u.user.avatar" mode="aspectFill"></image>
					<view class="user-info">
						<view class="info-row"><text
								class="label">姓名</text>{{ u.user && u.user.nickname ? u.user.nickname : '---' }}</view>
						<view class="info-row"><text
								class="label">手机号</text>{{ u.user && u.user.mobile ? u.user.mobile : '****' }}</view>
						<view v-if="u.user && u.user.train_day" class="info-row">
							<text class="label">训练天数</text>{{ u.user.train_day }}
						</view>
						<view v-if="u.user && u.user.train_duration" class="info-row">
							<text class="label">累计时长</text>{{ u.user.train_duration }}小时
						</view>
					</view>
				</view>
			</view>

			<!-- 课程信息 -->
			<view class="block">
				<view class="block-title">课程信息</view>
				<view class="info-row"><text class="label">课程</text>{{ info.goods ? info.goods.goods_name : '' }}</view>
				<view class="info-row"><text class="label">价格</text>{{ info.pay_amount }} 元</view>
				<view class="info-row"><text class="label">下单时间</text>{{ info.pay_time || '--' }}</view>
				<view class="info-row"><text class="label">数量</text>{{ info.goods_num }} 节</view>
				<view v-if="info.coupon_amount && info.coupon_amount !== '0.00'" class="info-row">
					<text class="label">优惠</text> -{{ info.coupon_amount }} 元
				</view>
			</view>

			<!-- 上课安排 -->
			<view class="block">
				<view class="block-title">上课安排</view>
				<view class="info-row"><text
						class="label">门店</text>{{ info.course_camp && info.course_camp.shop.shop_name ? info.course_camp.shop.shop_name : '--' }}
				</view>
				<view class="info-row"><text
						class="label">上课时间</text>{{ formatTime(info.course_camp && info.course_camp.class_time) }}
				</view>
				<view class="info-row"><text
						class="label">授课老师</text>{{ info.course_camp && info.course_camp.coach.coach_name ? info.course_camp.coach.coach_name : '--' }}
				</view>
				<view v-if="info.course_camp && info.course_camp.remarks" class="info-row">
					<text class="label">备注</text>{{ info.course_camp.remarks }}
				</view>
			</view>

			<!-- 订单编号 -->
			<view class="block" style="margin-bottom: 36rpx;">
				<view class="block-title">订单编号</view>
				<view class="info-row">{{ info.order_no }}</view>
			</view>

			<view class="btn-bar">
				<button class="back-btn" @tap="goBack">返回订单列表</button>
			</view>
		</view>

		<!-- 订单不存在 -->
		<view v-else class="not-found">
			<view>订单不存在</view>
			<view class="tip">请返回订单列表</view>
			<view class="btn-bar">
				<button class="back-btn" @tap="goBack">返回订单列表</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: null,
				goods_id: null,
				info: null,
				userInfo: null
			}
		},
		onLoad(options) {
			this.order = options.id
			this.goods_id = options.goods_id
			this.getDetails(this.order, this.goods_id)
		},
		methods: {
			getDetails(id, goods_id) {
				let _this = this
				this.$http({
					url: '/addons/xilufitness/shop/getDetail',
					data: {
						id,
						goods_id
					}
				}).then(res => {
					_this.info = res.data.info;
					_this.userInfo = res.data.userList.list;
				});
			},
			getOrderStatusText(status) {
				// 可根据业务补全
				switch (parseInt(status)) {
					
					case 1:
						return '待上课';
					case 2:
						return '进行中';
					case 3:
						return '已完成';
					case 4:
						return '已取消';
					case 5:
						return '已过期';
					case 6:
						return '已评论';
					case 10:
						return '在排队';
					case 11:
						return '已退费';
					default:
						return '';
				}
			},
			getOrderStatusClass(status) {
				switch (parseInt(status)) {
					case 1:
						return 'pending';
					case 2:
						return 'pending';
					case 3:
						return 'cancelled';
					case 4:
						return 'refunded';
					case 5:
						return 'completed';
					default:
						return '';
				}
			},
			formatTime(t) {
				if (!t) return '--';
				// 秒时间戳转本地日期（如2025-07-29 10:00）
				const d = new Date(t * 1000);
				return `${d.getFullYear()}-${(d.getMonth()+1).toString().padStart(2,'0')}-${d.getDate().toString().padStart(2,'0')} ${d.getHours().toString().padStart(2,'0')}:${d.getMinutes().toString().padStart(2,'0')}`;
			},
			goBack() {
				uni.navigateBack();
			}
		}
	}
</script>
<style scoped>
	.container {
		min-height: 100vh;
		background: #111;
		color: #f7f7f7;
		padding: 0 0 40rpx 0;
		box-sizing: border-box;
	}

	.header-bg {
		background: linear-gradient(135deg, #23252b 60%, #18181c 100%);
		padding: 0 10vw 36rpx 10vw;
		border-radius: 0 0 38rpx 38rpx;
		box-shadow: 0 8rpx 32rpx #0008;
	}

	.header-main {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		padding-top: 58rpx;
	}

	.course {
		font-size: 40rpx;
		font-weight: 700;
		color: #ffcd38;
		letter-spacing: 2rpx;
	}

	.status {
		font-size: 26rpx;
		border-radius: 20rpx;
		padding: 8rpx 30rpx;
		font-weight: 500;
		margin-left: 18rpx;
		margin-bottom: 6rpx;
	}

	.status-completed {
		background: #1c2e18;
		color: #95ec69;
	}

	.status-pending {
		background: #2a1a0a;
		color: #ffcd38;
	}

	.status-cancelled {
		background: #2c1c1c;
		color: #fa6464;
	}

	.status-refunded {
		background: #1e2127;
		color: #54a8f5;
	}

	.detail-content {
		padding: 0 5vw;
		margin-top: -28rpx;
	}

	.block {
		background: #18181c;
		border-radius: 22rpx;
		margin-bottom: 32rpx;
		padding: 32rpx 24rpx 18rpx 24rpx;
		box-shadow: 0 4rpx 16rpx #0003;
		position: relative;
	}

	.block-title {
		font-size: 28rpx;
		color: #ffd34e;
		font-weight: 600;
		margin-bottom: 22rpx;
		border-left: 6rpx solid #ffd34e;
		padding-left: 18rpx;
		letter-spacing: 2rpx;
	}

	.info-row {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-bottom: 14rpx;
		color: #ececec;
		word-break: break-all;
	}

	.label {
		width: 140rpx;
		color: #aaa;
		flex-shrink: 0;
		margin-right: 20rpx;
		text-align: right;
	}

	/* 学员头像与信息 */
	.user-row {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background: #222;
		margin-right: 24rpx;
	}

	.user-info {
		flex: 1;
		min-width: 0;
	}

	.btn-bar {
		width: 100%;
		text-align: center;
		margin-top: 28rpx;
	}

	.back-btn {
		display: inline-block;
		padding: 18rpx 110rpx;
		background: #232323;
		color: #ffcd38;
		border-radius: 48rpx;
		font-size: 28rpx;
		font-weight: bold;
		box-shadow: 0 1px 6px #0002;
		border: none;
	}

	.not-found {
		color: #888;
		font-size: 32rpx;
		text-align: center;
		margin: 120rpx 0 20rpx 0;
	}

	.tip {
		font-size: 26rpx;
		margin-top: 18rpx;
	}
</style>